<template>
    <div class="modal_signin_info">
        <div class="row">
            <div v-if="type === 7" class="col">{{ t("activity_page_sign_min_bet", {money: $currencyMoney(minLevelData.bet)}) }}</div>
            <div v-else class="col">{{ t("activity_page_signLostBetTip", {money: $currencyMoney(signData.add_sign_in)}) }}</div>
        </div>
        <div class="progress">
            <div class="progress_bar" :class="[{failed: [4, 7].includes(Number(type))}]" :style="`width: ${pecent}`"></div>
            <div v-if="type === 4" class="text_pecent">{{ $currencyMoney(signData.cur_bet - signData.used_bet) }}/{{ $currencyMoney(signData.add_sign_in) }}</div>
            <div v-else-if="type === 6" class="text_pecent">{{ $currencyMoney(leaveMoney) }}/{{ $currencyMoney(signData.add_sign_in) }}</div>
            <div v-else-if="type === 7" class="text_pecent">{{ $currencyMoney(signData.cur_bet) }}/{{ $currencyMoney(minLevelData.bet) }}</div>
        </div>
        <div v-if="type === 4" class="row" v-html="t('activity_page_signLostNeedMoney', {money: needMoney})"></div>
        <div v-else-if="type === 6" class="row">{{ t('activity_page_signLostLeaveBet', {money: $currencyMoney(leaveMoney)}) }}</div>
        <div v-else-if="type === 7" class="row" v-html="t('activity_page_sign_min_bet_need', {money: $currencyMoney(needBetScore)})"></div>
        <div class="btns_wrap">
            <nut-button v-if="[4, 7].includes(Number(type))" @click="goToBet" class="btn_b">{{ t('activity_page_keepBet') }}</nut-button>
            <nut-button v-if="type === 6" @click="signInAction" class="btn_b">{{ t('activity_page_signComfirmBtnLost') }}</nut-button>
        </div>
        <div class="notice">{{ t('activity_page_sevenDays') }}</div>
    </div>        
</template>
<script lang="ts" setup>
import { computed, defineEmits } from 'vue'
import { useI18n } from "vue-i18n";
import { currencyMoney } from "@/utils/publicMethods";

const { t } = useI18n();
const emit = defineEmits(["signIn", "goBet"]);
const props = defineProps({
    singInSucInfo: {
        type: Object,
        default: {}
    },
    signData: {
        type: Object,
        default: {}
    },
    nextLevelData: {
        type: Object,
        default: {}
    },
    minLevelData: {
        type: Object,
        default: {}
    },
    type: {
        type: Number // 1=签到 2=签到领取成功 3=补签成功 4=补签失败(未达到补签有效投注额) 5=完成今日签到提示 6=补签确认 7=(签到失败)未达到有效投注
    }
})

const needMoney = computed(() => {
    return currencyMoney(props.signData.add_sign_in - (props.signData.cur_bet - props.signData.used_bet));
})

const leaveMoney = computed(() => {
    return props.signData.cur_bet - props.signData.add_sign_in -  props.signData.used_bet;
})

const needBetScore = computed(() => {
    return props.minLevelData.bet - props.signData.cur_bet;
})

const pecent = computed(() => {
    return (leaveMoney.value / (leaveMoney.value + props.signData.add_sign_in) * 100).toFixed(2) + "%";
})
const signInAction = () => {
    emit("signIn");
}

const goToBet = () => {
    emit("goBet");
}

</script>
<style lang="scss" scoped>
.modal_signin_info {
    .row {
        margin-bottom: 10px;
        :deep(.highlight) {
            color: #ffe141;
        }
        .col {
            font-size: 14px;
            color: #ffffff;
            .time {
                color: #ffe141;
            }
        }
    }
    .progress {
        width: 100%;
        height: 16px;
        background: #282845;
        border-radius: 20px;
        position: relative;
        margin-bottom: 10px;
        overflow: hidden;
        .progress_bar {
            height: 100%;
            background: linear-gradient(90deg, rgba(115, 184, 238, 1) 0%, rgba(105, 166, 236, 1) 41%, rgba(197, 135, 233, 1) 100%);
            border-radius: 0px;
            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url("/imgs/activity/signIn/progress_cover.png") repeat-x;
                background-size: auto 110%;
                border-radius: 8px;
            }
            &.failed {
                background: #f00;
                width: 100% !important;
            }
        }
        .text_pecent {
            position: absolute;
            top: 0;
            left: 10px;
            color: #fff;
            font-size: 10px;
            line-height: 16px;
        }
        .icon_coin {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: url("/imgs/activity/signIn/icon_coin.png") no-repeat;
            background-size: 100% 100%;
        }
    }
}
</style>